<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>
	<ul>
		<li><a href="#"><<</a></li>
		<li><a href="#">1</a></li>
		<li><a href="# " class="sfd">2</a></li>
		<li><a href="#">3</a></li>
		<li><a href="#">4</a></li>
	    <li><a href="#">5</a></li>
		<li><a href="#">6</a></li>
		<li><a href="#">7</a></li>
		<li><a href="#">>></a></li>
	</ul>
<script>
function changeImage()
{
	element=document.getElementById('myimage')
	if (element.src.match("bulbon"))
	{
		element.src='D:/Pictures/Saved Pictures/bulboff.png';
	}
	else
	{
		element.src="D:/Pictures/Saved Pictures/bulbon.png";
	}
}
</script>
<img id="myimage" onclick="changeImage()" src='D:/Pictures/Saved Pictures/bulboff.png' width="100" height="180">
<p>点击灯泡就可以打开或关闭这盏灯</p>
<style>
	ul{
		list-style-type: none;
		overflow: hidden;
		margin: 0;
		padding: 0;
		background-color: white;
		text-decoration: none;
	}
	li{
		float: left;
	}
	a{
		display: block;
		color: black;
		text-align: center;
		width: 30px;
		text-decoration: none;
	}
	a:hover{
		background-color: #555;
		border-radius: 10%;
	}
	li a.sfd{
		background-color: green;
		color: #f1f1f1;
		border-radius: 10%;
	}
</style>
</body>
</html>